	page {
		min-height: 100vh;
		background-color: #FAFAFE;
	}

	.bg {
		width: 100%;
		height: 400rpx;
		clip-path: ellipse(90% 50% at 50% 30%);
		position: relative;
		overflow: hidden;

		.bg-img {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	.info-card {
		margin: 0 35rpx;
		background-color: #fff;
		border-radius: 15rpx;
		position: absolute;
		width: calc(100% - 70rpx);
		z-index: 10;
		bottom: 50rpx;
		left: 0;
		height: 230rpx;
		overflow: hidden;
		.status{
			position: absolute;
			left: 0;
			top: 0;
			background-color: #7A2600;
			color: #E9DAC4;
			padding: 7rpx 12rpx;
			font-size: 22rpx;
			border-top-left-radius: 15rpx;
			border-bottom-right-radius: 15rpx;
			z-index: 100;
			&.open{
				background-color: #FC602B;
			}
		}
		.bg{
			width: 100%;
			height: 140%;
			position: absolute;
			left: 0;
			top: 0;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.info {
			margin: 0 76rpx;
			position: relative;
			z-index: 100;
			@extend .flex-btw;
			.icon {
				width: 120rpx;

				height: 150rpx;

				image {
					width: 100%;
					height: 100%
				}
			}

			.left {
				display: flex;
				flex-direction: column;
				margin-top: 35rpx;

				.name {
					font-size: 36rpx;
					margin-bottom: 15rpx;
				}
				.time{
					font-size: 20rpx;
					color: #666666;
				}
			}
		}
	}

	.tabs {
		@extend .flex-btw;
		margin: 0 105rpx;
		font-size: 32rpx;
		margin-top: -50rpx;
		margin-bottom: 30rpx;
		border-bottom: 1px solid #f4f4f4;

		.item {
			border-bottom: 5rpx solid transparent;
			padding-bottom: 15rpx;
			transition: all linear .2s;
			font-weight: bold;

			&.active {
				color: #FC602B;
				border-color: #FC602B;
			}
		}
	}

	.intro-title {
		margin: 50rpx 0;
		@extend .flex-center;
		margin-top: -20rpx;

		.title {
			position: relative;
			font-size: 36rpx;

			&::before,
			&::after {
				content: "";
				height: 3rpx;
				width: 150rpx;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
			}

			&::before {
				transform: rotateZ(180deg);
				left: -80%;
				background: linear-gradient(to left, transparent, #000);
			}

			&::after {
				transform: rotateZ(180deg);
				right: -80%;
				background: linear-gradient(to right, transparent, #000);
			}
		}
	}
	.intro-list{
		margin: 0 32rpx;
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(4, 25%);
		justify-content: space-between;
		grid-row-gap: 70rpx;
		border-radius: 15rpx;
		box-shadow: 0 -3rpx 25rpx #ebebeb;
		.item{
			display: flex;
			flex-direction: column;
			text-align: center;
			align-items: center;
			image{
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 15rpx;
			}
			.name{
				font-weight: bold;
			}
			.intro{
				font-size: 22rpx;
			}
		}
	}
	.target{
		@extend .flex-btw;
		padding: 30rpx 100rpx;
		.item{
			@extend .flex-btw;
			.circle{
				width: 30rpx;
				height: 30rpx;
				border: 2px solid #5b5b5b;
				border-radius: 50rpx;
				position: relative;
				margin-right: 10rpx;
				&.checked{
					border-color: #ff5532;
					&:before{
						content: "";
						width: 60%;
						height: 60%;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%); 
						background-color: #ff5532;
						border-radius: 50%;
					}
				}
			}
		}
	}
	.button{
		background-color: #ffe2b2;
		margin: 0 55rpx;
		@extend .flex-center;
		height: 115rpx;
		color: #792813;
		font-size: 36rpx;
		border-radius: 100rpx;
		font-weight: bold;
		box-shadow: 0 5rpx 20rpx #c2c2c2;
	}
	.agreement{
		@extend .flex-center;
		margin-top: 50rpx;
		margin-bottom: 50rpx;
		.link{
			color: #7A2600;
		}
	}
	.coupon-group{
		margin: 30rpx;
		background-color: #fff;
		box-shadow: 0 5rpx 15rpx #e1e1e1;
		border-radius: 18rpx;
		padding: 30rpx 25rpx;
	}
	.legal-title{
		margin-top: 30rpx;
		margin-left: 30rpx;
		font-size: 32rpx;
		font-weight: bold;
	}
	.share{
		position: absolute;
		right: 0;
		top: 12%;
		z-index: 100;
		background-color: #FCE6B7;
		border-radius: 100rpx 0 0 100rpx;
		padding: 10rpx 0;
		.btn{
			  text-align: center;
			  border: none;
			  border-radius:0;
			  background-color:transparent;
			  display: flex;
			  font-size: 24rpx;
			  color: #7A2600;
			  &::after {
				border: none;
			  }
		}
	}
	.open-coupon{
		margin-top: 38rpx;
		@extend .flex-center;
		.dot{
			width: 6rpx;
			height: 6rpx;
			border-radius: 50%;
			background-color: #999999;
		}
		image{
			width: 100rpx;
			height: 34rpx;
			margin: 10rpx;
		}
	}
	.discount{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 500rpx;
		margin: 0 auto;
	}